<script setup>
    import { RouterLink,useRouter } from 'vue-router';
    import axios from 'axios';
    import { ref } from 'vue';
    import { showMsg } from '@/components/Util';

    let router = useRouter();
    let uname = ref('');
    let pwd = ref('');
    let mobile = ref("");
    let sfz = ref("");
    function sub(){
        if(uname.value && pwd.value && mobile.value && sfz.value){
            axios.post('/api/reg',{uname:uname.value,pwd:pwd.value,mobile:mobile.value,sfz:sfz.value},{
                headers:{
                    "Content-Type":"application/json"
                }
            }).then(res=>{
                if(res.data.status==200){
                    router.push('/')
                }else{
                    showMsg(res.data.msg,'error',2000)
                }
                console.log(res);
            })
        }else{
            showMsg("表单填写不完整",'error',2000)
        }
    }
</script>

<template>
     <div class="reg">
        <div class="yi">
            <h1 class="title">欢迎注册</h1>
            <span>已有账号?<RouterLink to="/" class="dl">登录</RouterLink></span>
        </div>
        <div class="er">
            <input type="text" placeholder="用户名" v-model="uname">
            <input type="password" placeholder="密码" v-model="pwd">
            <!-- <p class="an">
                男<input id="man" type="radio" checked="checked" name="sex" v-model="sex"/>
                女<input type="radio" id="woman" name="sex" v-model="sex">
            </p> -->
            
            <input type="text" placeholder="手机号" v-model="mobile">
            <input type="text" placeholder="身份证号" v-model="sfz">
        </div>
        <button @click="sub">注册</button>
     </div>
</template>

<style scoped>
        .reg{
            width: 375px;
            height: 500px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 35px;
            background-color: rgb(229, 231, 229);
            box-shadow: 10px 5px 5px rgb(217, 209, 209);
            user-select: none;
            /* padding: 50px; */
            /* align-items: center; */
            margin-top: 55px;
        }
        .an{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .an input{
            color: aqua;
            transform: scale(0.7);
        }
        input{
            display: flex;
            flex-direction: column;
            gap: 5px;
            width: 270px;
            height: 30px;
            outline: none;
            padding: 5px 2px;
            border-radius: 50px;
            border: 0px;
            outline: none;
            /* background-color: #56737b; */
            background-color: rgb(190, 167, 190);
            color: black;
            background-position: 10px;
            padding-left: 30px;
        }
        .yi{
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: baseline;
            padding: 4px 7px;
        }
        span{
            font-size: 15px;
            display: flex;
            gap: 10px;
        }
        h1{
            height: 25px;
        }
        .dl{
            color: rgb(36, 31, 31);;
            font-weight: bold;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            border: none;
        }
        .dl:hover{
            background-color: #66475a; /* Green */
            color: white;
            border: none;
        }
        .er{
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 20px 30px;

        }
        button{
            width: 200px;
            height: 30px;
            cursor: pointer;
            margin-left: 80px;
        }
    
</style>